<!--方法一（双按钮）-->
<!--<!doctype html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<meta name="viewport"-->
          <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <!--<title>切换背景</title>-->
    <!--<style>-->

    <!--</style>-->
<!--</head>-->
<!--<body style="background:url('../素材/1.jpg')">-->
<!--<button>动</button>-->
<!--<button>停</button>-->
<!--<script>-->
    <!--var btn=document.getElementsByTagName("button");-->
    <!--var arr=["../素材/1.jpg","../素材/2.jpg","../素材/3.jpg","../素材/4.jpg"];-->
    <!--var timer=null;-->
    <!--var i=1;-->
    <!--function fn(){-->
        <!--if(i%arr.length<arr.length){-->
            <!--document.body.style.background="url("+arr[i%arr.length]+")";-->
        <!--}-->
        <!--i++;-->
    <!--}-->
    <!--btn[0].onclick=function(){-->
        <!--fn();-->
        <!--clearInterval(timer);-->
        <!--timer=setInterval(fn,3000);-->
    <!--}-->
    <!--btn[1].onclick=function(){-->
        <!--clearInterval(timer);-->
    <!--}-->
<!--</script>-->
<!--</body>-->
<!--</html>-->


<!--方法二（单按钮）-->
<!--<!doctype html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<meta name="viewport"-->
          <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <!--<title>Document</title>-->
    <!--<style>-->
        <!--button{-->
            <!--padding:0;-->
            <!--margin:0;-->
        <!--}-->
        <!--button{-->
            <!--width: 100px;-->
            <!--height: 40px;-->
            <!--text-align:center;-->
            <!--font:20px/40px microsoft yahei;-->
        <!--}-->
    <!--</style>-->
<!--</head>-->
<!--<body style="background-color:palevioletred">-->
<!--<button>按钮</button>-->
<!--<script>-->
    <!--var arr=["yellowgreen","greenyellow","lightblue","pink"];-->
    <!--var btn=document.getElementsByTagName("button");-->
    <!--var timer=null;-->
    <!--var i=0;-->
    <!--var j=0;-->
    <!--btn[0].onclick=function(){-->
        <!--j++;-->
        <!--if(j%2){-->
            <!--clearInterval(timer);-->
            <!--timer=setInterval(function(){-->
                <!--if(i%arr.length<arr.length){-->
                    <!--document.body.style.backgroundColor=arr[i%arr.length];-->
                <!--}-->
                <!--i++;-->
            <!--},1000)-->
        <!--}else{-->
            <!--clearInterval(timer);-->
        <!--}-->

    <!--}-->

<!--</script>-->
<!--</body>-->
<!--</html>-->
<!--方法三：单按钮（鼠标单双击实现特效）-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        button{
            padding:0;
            margin:0;
        }
        button{
            width: 100px;
            height: 40px;
            text-align:center;
            font:20px/40px microsoft yahei;
        }
    </style>
</head>
<body style="background-color:palevioletred">
<button>按钮</button>
<script>
    var arr=["yellowgreen","greenyellow","lightblue","pink"];
    var btn=document.getElementsByTagName("button");
    var timer=null;
    var i=0;
    btn[0].onclick=function(){
        clearInterval(timer);
        timer=setInterval(function(){
            if(i%arr.length<arr.length){
                document.body.style.backgroundColor=arr[i%arr.length];
            }
            i++;
        },1000)
    }
    btn[0].ondblclick=function(){
        clearInterval(timer);
    }
</script>
</body>
</html>